<template>
  <div class="rightBox" :class="{ 'hidden-icon': isHidden }">
    <!-- <stable-msg :dialogVisible="showDialog" @closeDialog="closeDig" @getRes="getRes"></stable-msg> -->

    <!-- <res :dialogRes="dialogRes" @closeRes="closeDigRes" @getUp="getUp" @getOver="closeDig"></res> -->

    <div class="fold-icon" @click="closeRightBox">
      <el-icon>
        <DArrowRight :class="{ 'hidden-icon': isHidden }" />
      </el-icon>
    </div>
    <!-- <div class="inner-box" v-if="showBox"> -->
    <div class="inner-box">
      <div class="rightBox-title">考核历史</div>
      <div style="" class="demo-form-inline">
        <el-form :inline="true" :model="formInline" class="form-box">
          <!-- <el-row> -->
          <el-form-item label="记录名称">
            <el-input
              v-model="formInline.scName"
              placeholder="请输入"
              style="width: 80px"
            ></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <!-- <el-date-picker v-model="formInline.time" type="datetime" placeholder="请选择时间" /> -->
            <el-date-picker
              v-model="formTime.time"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
              @change="handleTime"
            />
          </el-form-item>
          <!-- <el-form-item label="计算方案">
            <el-select v-model="formInline.schemeType" placeholder="">
              <el-option v-for="item in state.schemeTypeOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="calcSchemeList" class="search-btn">查询</el-button>
          </el-form-item>
          <!-- </el-row> -->
        </el-form>
        <el-button type="primary" @click="handleUpdateScheme" class="search-btn" :icon="Plus"
          >+新增考核</el-button
        >
      </div>
      <div class="table-box">
        <el-table border :data="state.tableData" style="width: 100%" height="100%">
          <el-table-column label="单选" width="80" align="center">
            <template #default="scope">
              <el-radio
                v-model="CurrentItem"
                :label="scope.row"
                @change="getCurrentRow(scope.row)"
                >{{ '' }}</el-radio
              >
            </template>
          </el-table-column>
          <el-table-column prop="scName" label="考核记录名称" align="center" />
          <!-- <el-table-column prop="name" label="考核模型配置方案" width="160" /> -->
          <!-- <el-table-column prop="creator" label="构建人" /> -->
          <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column prop="name" label="操作 " align="center">
            <template #default="{ row }">
              <el-button type="danger" @click="handleDeleteScheme(row)">删除</el-button>
              <el-button type="primary" @click="handleUpdateScheme(row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- <pagi-nation
        :pageSize="page.pageSize"
        :pageTotal="page.total"
        @pageFunc="pageFunc"
        class="page"
      >
      </pagi-nation> -->
      <div class="rightBox-title">
        考核详情-<i class="title">{{ CurrentItem.scName }}</i>
      </div>
      <!-- <div class="tabs-box">
        <el-tabs v-model="activeName" @tab-click="handleClickTab" type="border-card">
          <el-tab-pane label="基础信息" name="first">
            <div class="input">
              <span>预报断面:</span>
              <el-select v-model="value" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <img src="@/assets/images/modelExam/gps.png" alt="" />
            </div>
            <div class="tabs-item">
              <information />
            </div>
          </el-tab-pane>
          <el-tab-pane label="计算结果" name="second" :lazy="true">
            <div class="tabs-item">
              <ComputeResult />
            </div>
          </el-tab-pane>
          <el-tab-pane label="综合评定结果" name="third">
            <div class="tabs-item">
              <EvaluateResult />
            </div>
          </el-tab-pane>
        </el-tabs>
      </div> -->
      <div class="detail-bottom">
        <el-tabs type="border-card">
          <el-tab-pane lazy label="预报配置信息">
            <!-- <ConfigInfo
              v-if="CurrentItem.calcscType == 0"
              :schemeId="CurrentItem.id"
              :zId="CurrentItem.id"
            /> -->
            <ConfigInfo
              v-if="CurrentItem.calcscType == 0"
              :schemeId="CurrentItem.id"
              :zId="state.searchId"
            />
            <RiverconfigInfo v-else :schemeId="CurrentItem.id" :zId="CurrentItem.calcZone" />
          </el-tab-pane>
          <el-tab-pane lazy label="场次计算信息">
            <PlayInfo
              :schemeId="CurrentItem.id"
              :zId="state.searchId"
              @showDialog="showDialogEcharts"
              :watershedId="props.watershedId"
              :flag="state.flag"
            />
          </el-tab-pane>
          <el-tab-pane lazy label="分析结果">
            <!--CurrentItem.id:方案id  -->
            <ResultInfo
              :schemeId="CurrentItem.id"
              :watershedId="props.watershedId"
              :flag="state.flag"
              :zId="state.searchId"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <el-dialog
      top="10px"
      class="el-dialog-box"
      title="场次计算信息"
      v-model="provingItem"
      width="90%"
      :before-close="closeProVingItem"
      @opened="openDiag"
    >
      <!--showBtn 用于控制右侧放大按钮显隐 props.watershedId流域id-->
      <PlayInfo
        v-if="provingItem"
        :schemeId="CurrentItem.id"
        :zId="state.searchId"
        :watershedId="props.watershedId"
        :showBtn="false"
        :flag="state.flag"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted, nextTick, watch } from 'vue'
import emitter from '@/utils/bus'
import { ElMessage, ElMessageBox } from 'element-plus'
//预报配置信息
import ConfigInfo from './cpns/areaconfigInfo/index.vue'
//河系预报配置信息
import RiverconfigInfo from './cpns/riverconfigInfo/index.vue'
//场次计算信息
import PlayInfo from './cpns/playInfo/index.vue'
//评价结果
import ResultInfo from './cpns/resultInfo/index.vue'
import pagiNation from '@/components/app-pagination/pagination.vue'

// import stableMsg from './cpns/Dialog/stableMsg.vue'
// import res from './cpns/Dialog/computeRes.vue'
// import information from './cpns/BaseInfo/information.vue'
import ComputeResult from '@/components/app-publicui/compute-result.vue'
import EvaluateResult from '@/components/app-publicui/evaluate-result.vue'
// 接口
import { getCalcSchemeList, deleteCalcScheme } from '@/services/modules/model-exam'

const isHidden = ref(false)
const activeName = ref('first')
let showDialog = ref(false)
let dialogRes = ref(false)
let showBox = ref(true)
let navId = ref(1)
let CurrentItem = ref('')
let page = reactive({
  pageNum: 1, //当前页
  pageSize: 10, //每页条目数
  total: 100 // 记录总数
})
const state = reactive({
  // 考核列表
  tableData: [],
  schemeTypeOptions: [
    {
      label: '区域',
      value: 1
    },
    {
      label: '河系',
      value: 2
    }
  ],
  // 查询断面的ids
  searchId: '',
  // 控制子组件的河系下的区域显隐
  flag: false
})
// 控制放大弹框
let provingItem = ref(false)
const props = defineProps({
  watershedId: {
    type: Number,
    default: 0
  }
})
watch(
  () => {
    props.watershedId
  },
  () => {
    formInline.zoneId = props.watershedId
    calcSchemeList()
  },
  {
    deep: true
  }
)
emitter.on('resetCheck', (value) => {
  calcSchemeList()
})
//删除考核方案
function handleDeleteScheme(row) {
  ElMessageBox.confirm(`是否删除${row.scName}`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      deleteCalcScheme({ id: row.id }).then((res) => {
        if (res.code === 200) {
          ElMessage.success(res.msg)
          calcSchemeList()
        }
      })
    })
    .catch(() => {})
}
// 场次计算子组件回调事件打开弹框
function showDialogEcharts() {
  provingItem.value = true
}
// 关闭弹框调用事件
function closeProVingItem() {
  provingItem.value = false
}
// 刷新echarts
function openDiag() {
  nextTick(() => {
    emitter.emit('initEcharts')
  })
}
//修改方案，新增方案
function handleUpdateScheme(row) {
  // emit('handleShowAdded', row)
  console.log(row, 'aaaaaaaa')
  emitter.emit('updateScheme', row)
}
const closeRightBox = () => {
  isHidden.value = !isHidden.value
}
function handleClickTab(tab) {
  activeName.value = tab.props.name
}
const pageFunc = (data) => {
  page.pageSize = data.pageSize
  page.pageNum = data.pageNum
  //initialization() // 触发获取数据函数
}
const handleTime = (val) => {
  console.log(val, 111)
  if (val?.length) {
    formInline.sTime = val[0]
    formInline.eTime = val[1]
  } else {
    formInline.sTime = ''
    formInline.eTime = ''
  }
}
const formInline = reactive({
  zoneId: 0,
  scName: '',
  sTime: '',
  eTime: ''
})
const formTime = reactive({
  time: []
})

const getNav = (e) => {
  navId.value = e
}
const getUp = (e) => {
  showDialog.value = true
  dialogRes.value = e
}
// const emit = defineEmits(['handleShowAdded'])

const getDialog = () => {
  // showDialog.value = true
  // showBox.value = false
  // 打开新增考核
  // emit('handleShowAdded', {})
}
// 查询计算方案考核列表
function calcSchemeList() {
  // delete formInline?.time
  console.log(formInline, 999)
  getCalcSchemeList({ ...formInline }).then((res) => {
    if (res.code === 200) {
      state.tableData = res.data
      if (res.data.length > 0) {
        // 默认选中第一个考核方案
        getCurrentRow(state.tableData[0])
      } else {
        CurrentItem.value.id = 0
        CurrentItem.value.calcZone = 0
      }
    }
  })
}
onMounted(() => {
  calcSchemeList()
})
onUnmounted(() => {
  emitter.off('resetCheck')
})
// 选择方案
const getCurrentRow = (item) => {
  state.searchId = item.calcZone
  CurrentItem.value = item
  // calcscType 代表1河系还是0区域,
  if (item.calcscType == 0) {
    state.flag = false
  } else if (item.calcscType == 1) {
    state.flag = true
  }
}
// 弹窗 v控制弹窗显隐
const closeDig = (v) => {
  showDialog.value = v
  dialogRes.value = false
  if (showDialog && dialogRes.value === false) {
    showBox.value = true
  } else {
    showBox.value = true
  }
}
// 弹窗 v控制弹窗显隐
const closeDigRes = (v) => {
  showDialog.value = v
  dialogRes.value = false
  console.log(showDialog.value, dialogRes.value)

  if (showDialog && dialogRes.value === false) {
    showBox.value = true
  } else {
    showBox.value = true
  }
  console.log(showBox.value)
}
const getRes = () => {
  showDialog.value = false
  dialogRes.value = true
  if (showDialog && dialogRes.value === false) {
    showBox.value = true
  } else {
    showBox.value = false
  }
}
</script>

<style lang="less" scoped>
:deep(.el-dialog-box) {
  height: 90vh;
  margin-top: 5vh !important;
  .el-dialog__body {
    height: calc(100% - 100px);
  }
}
.rightBox {
  height: 100%;
  width: 1120px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 1px solid var(--fold-border-color);
  padding: 0 20px;
  border-radius: 4px;
  box-sizing: border-box;
  background: var(--fold-bg-color);
  transition: right 1s;
  &.hidden-icon {
    right: -1120px;
    transition: right 1s;
  }
  .fold-icon {
    width: 20px;
    height: 120px;
    line-height: 120px;
    position: absolute;
    background: #eee;
    top: 50%;
    left: -20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
    transform: translateY(-50%);
    @keyframes myload {
      from {
        opacity: 0;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
      to {
        opacity: 1;
        -webkit-transform: rotate(0deg); /* Safari */
        transform: rotate(0deg); /* 标准语法 */
      }
    }
    .el-icon {
      cursor: pointer;
      position: relative;
      display: block;
      animation: myload 1s infinite ease-in-out;
      -webkit-animation: myload 1s infinite ease-in-out;
      svg {
        &.hidden-icon {
          // border-top-right-radius: 35px;
          // border-bottom-right-radius: 35px;
          transform: rotate(180deg);
        }
      }
    }
  }
  .inner-box {
    width: 100%;
    height: 100%;
  }
  .rightBox-title {
    height: 45px;
    font-size: var(--header-fontsize);
    line-height: 45px;
    border-bottom: 1px solid var(--fold-border-color);
  }
  .form-box {
    display: flex;
  }

  .demo-form-inline {
    font-size: var(--content-fontsize);
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin-top: 20px;
  }
  .table-box {
    height: 150px;
  }
  .page {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(197, 197, 197);
  }

  .title {
    color: #409eff;
  }
  .detail-bottom {
    margin-top: 10px;
    height: calc(100% - 335px);
    box-sizing: border-box;
    :deep(.el-tabs--border-card) {
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 60px);
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }
  .tabs-box {
    box-sizing: border-box;
    height: calc(100% - 410px);
    :deep(.el-tabs) {
      height: 100%;
      font-size: var(--content-fontsize);
      .el-tabs__content {
        height: calc(100% - 55px);
        padding: 10px;
        .el-tab-pane {
          height: 100%;
        }
      }
    }
  }

  .right-box-nav {
    display: flex;
    justify-content: space-around;
    cursor: pointer;
    height: 30px;
  }

  .show {
    color: blue;
    text-decoration: underline;
  }

  .input {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .m-2 {
      margin: 0 20px;
    }

    img {
      width: 20px;
      height: 20px;
    }
  }
  .tabs-item {
    height: 100%;
  }
}
</style>
